<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <!-- tit组件 -->
        <tit
        :allChecked="allChecked"
        :arrLength="goodList.length"
        :theGoodList="goodList"
        />
      </thead>
      <tbody>
        <!-- shop组件 -->
        <shop
        v-for="(item, index) in goodList"
        :key="item.name"
        :theName="item.name"
        :thePrice="item.price"
        :theNum="item.num"
        :checked="item.checked"
        :i="index"
        @on-add="onAdd"
        @on-less="onLess"
        @on-del="onDel"
        @check-change="checkChange"
         />
      </tbody>
      <tfoot>
        <!-- total组件 -->
        <total />
      </tfoot>
    </table>
  </div>
</template>

<script>
import Shop from './components/Shop.vue'
import Tit from './components/Tit.vue'
import Total from './components/Total.vue'
export default {
  components: { Shop, Tit, Total },
  data () {
    return {
      goodList: [
        {
          name: '诸葛亮',
          price: 1000,
          num: 1,
          checked: false
        },
        {
          name: '蔡文姬',
          price: 1500,
          num: 1,
          checked: false
        },
        {
          name: '妲己',
          price: 2000,
          num: 1,
          checked: false
        },
        {
          name: '鲁班',
          price: 2200,
          num: 1,
          checked: false
        }
      ],
      allChecked: 0
    }
  },
  methods: {
    onAdd (e) {
      // console.log(e)
      this.goodList[e].num++
    },
    onLess (e) {
      if (this.goodList[e].num <= 1) return
      this.goodList[e].num--
    },
    onDel (e) {
      this.goodList.splice(e, 1)
    },
    checkChange (e) {
      // console.log(e)
      this.goodList[e[1]].checked = e[0]
      if (this.goodList[e[1]].checked) {
        this.allChecked++
      } else {
        this.allChecked--
      }
    }
  }
}
</script>

<style>
</style>
